:root {
  /* 基础颜色变量 */
  --color-primary: #1890ff;
  --color-primary-hover: #40a9ff;
  --color-primary-active: #096dd9;
  --color-success: #52c41a;
  --color-warning: #faad14;
  --color-error: #ff4d4f;
  --color-info: #1890ff;

  /* 中性色 */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-transparent: transparent;

  /* 文字颜色 */
  --color-text-primary: #000000;
  --color-text-secondary: rgba(0, 0, 0, 0.65);
  --color-text-disabled: rgba(0, 0, 0, 0.25);

  /* 背景颜色 */
  --color-bg-container: #ffffff;
  --color-bg-layout: #f5f5f5;
  --color-bg-elevated: #ffffff;
  --color-bg-spotlight: rgba(0, 0, 0, 0.45);

  /* 边框颜色 */
  --color-border: #d9d9d9;
  --color-border-secondary: #f0f0f0;

  /* 填充和边距 */
  --padding-xs: 8px;
  --padding-sm: 12px;
  --padding-md: 16px;
  --padding-lg: 24px;
  --padding-xl: 32px;

  --margin-xs: 8px;
  --margin-sm: 12px;
  --margin-md: 16px;
  --margin-lg: 24px;
  --margin-xl: 32px;

  /* 圆角 */
  --border-radius-sm: 2px;
  --border-radius-base: 6px;
  --border-radius-lg: 8px;

  /* 阴影 */
  --box-shadow-sm:
    0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px
    4px 0 rgba(0, 0, 0, 0.02);
  --box-shadow-base:
    0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px
    28px 8px rgba(0, 0, 0, 0.05);
  --box-shadow-lg:
    0 6px 16px -8px rgba(0, 0, 0, 0.08), 0 9px 28px 0 rgba(0, 0, 0, 0.05), 0
    12px 48px 16px rgba(0, 0, 0, 0.03);

  /* 字体 */
  --font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;
  --font-size-4xl: 38px;
  --font-size-5xl: 46px;

  /* 行高 */
  --line-height: 1.5715;
  --line-height-lg: 1.5;
  --line-height-sm: 1.6667;

  /* 字体粗细 */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
}

/* 深色主题变量 */
[data-theme="dark"] {
  --color-text-primary: rgba(255, 255, 255, 0.85);
  --color-text-secondary: rgba(255, 255, 255, 0.65);
  --color-text-disabled: rgba(255, 255, 255, 0.3);

  --color-bg-container: #1f1f1f;
  --color-bg-layout: #141414;
  --color-bg-elevated: #1f1f1f;
  --color-bg-spotlight: rgba(0, 0, 0, 0.85);

  --color-border: #424242;
  --color-border-secondary: #303030;

  --box-shadow-sm:
    0 1px 2px 0 rgba(0, 0, 0, 0.45), 0 1px 6px -1px rgba(0, 0, 0, 0.3), 0 2px
    4px 0 rgba(0, 0, 0, 0.3);
  --box-shadow-base:
    0 3px 6px -4px rgba(0, 0, 0, 0.48), 0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 9px
    28px 8px rgba(0, 0, 0, 0.2);
  --box-shadow-lg:
    0 6px 16px -8px rgba(0, 0, 0, 0.32), 0 9px 28px 0 rgba(0, 0, 0, 0.2), 0 12px
    48px 16px rgba(0, 0, 0, 0.12);
}

/* 浅色主题变量 */
[data-theme="light"] {
  --color-text-primary: #000000;
  --color-text-secondary: rgba(0, 0, 0, 0.65);
  --color-text-disabled: rgba(0, 0, 0, 0.25);

  --color-bg-container: #ffffff;
  --color-bg-layout: #f5f5f5;
  --color-bg-elevated: #ffffff;
  --color-bg-spotlight: rgba(0, 0, 0, 0.45);

  --color-border: #d9d9d9;
  --color-border-secondary: #f0f0f0;

  --box-shadow-sm:
    0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px
    4px 0 rgba(0, 0, 0, 0.02);
  --box-shadow-base:
    0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px
    28px 8px rgba(0, 0, 0, 0.05);
  --box-shadow-lg:
    0 6px 16px -8px rgba(0, 0, 0, 0.08), 0 9px 28px 0 rgba(0, 0, 0, 0.05), 0
    12px 48px 16px rgba(0, 0, 0, 0.03);
}
